<template>
  <div class="buildGate">
    <el-container ref="listWarp">
        <el-header class="toolbar-wap" style="height: 45px">
            <div>
                <el-select size="small" v-model="areaId" clearable style="width: 180px;margin-right: 10px;" placeholder="请选择校区" @change="funDataList">
                    <el-option v-for="item in campusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select size="small" v-model="buildId " clearable style="width: 180px" filterable placeholder="请选择楼宇名称" @change="funDataList">
                    <el-option v-for="item in manageBuildingList" :key="item.buildingId" :label="item.buildingName" :value="item.buildingId"></el-option>
                </el-select>
            </div>
            <!--工具条按钮-->
            <ToolButton :disabled="button.disabled" :icon="button.icon" :key="button.text" :left-line="button.leftLine" :right-line="button.rightLine" :text="button.text" :title="button.title" @buttonClick="toolButtonClick" v-for="button in toolButtons" />
        </el-header>
        <el-main class="page-main">
            <div class="content">
                <el-table :data="tableData" height="100%" style="width: 100%" border :highlight-current-row="true" v-loading="loadIng" :default-sort="defaultOrder"  @select="getStaffInfo" @select-all="getStaffInfo" @row-dblclick="openDbEdit" @row-click="getRowsInfo">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
                    <el-table-column prop="areaName" label="校区" width="180" align="center"></el-table-column>
                    <el-table-column prop="buildingName" label="楼宇名称" width="240" align="center"></el-table-column>
                    <el-table-column prop="accessName" label="闸机" align="left"></el-table-column>
                    <el-table-column prop="editName" label="编辑人" width="180px" align="center"></el-table-column>
                    <el-table-column prop="editTime" label="编辑时间" width="240px" align="center"></el-table-column>
                </el-table>
                <el-footer style="height: 45px; background-color: #fff" class="page-footer">
                    <el-pagination style="padding-top: 10px" background layout="prev, pager, next,jumper,total,sizes" @size-change="evtPageSizeChange" @current-change="evtPageCurrentChange" :current-page.sync="currentPage" :page-sizes="[20, 50, 100, 500]" :total="totalRows"></el-pagination>
                </el-footer>
            </div>
        </el-main>
    </el-container>
    <!-- 新增 编辑 信息 -->
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" @close="evtDialogClose" lock-scroll :title="dialogTitle" width="500px">
        <div class="win-warp">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="校区名称" prop="areaId">
                    <el-select size="small" v-model="ruleForm.areaId" clearable style="width: 100%;" placeholder="请选择校区">
                    <el-option v-for="item in campusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="楼宇名称" prop="buildId">
                    <el-select size="small" v-model="ruleForm.buildId" clearable style="width: 100%;" filterable placeholder="请选择楼宇名称">
                        <el-option v-for="item in manageBuildingList" :key="item.buildingId" :label="item.buildingName" :value="item.buildingId"></el-option>
                    </el-select>
                </el-form-item>'
                <el-form-item label="闸机名称" prop="accessName">
                    <el-input type="textarea" :rows="2" placeholder="用; 间隔多个闸机名称" v-model="ruleForm.accessName"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="submitForm('ruleForm')" type="primary">确定</el-button>
        </div>
    </el-dialog>
    <!--导出-->
    <export-excel ref="exportExcel" :sheet-name="sheetName" :file-name="exportFileName"  extend="export" :columns="columns" :rows="totalRows" :query="searchObj" :export-api="exportApi" :isPerSon="false"/>
  </div>
</template>
<script>
import { apiLateRecord } from "@/api/basicData/lateRecord";
import { settingApi } from "@/api/system/setting";
import { buildGateApi } from "@/api/system/buildGate";
import ToolButton from "@/itsoftUI/components/toolbar/toolbutton";
import exportExcel from "@/itsoftUI/components/exportExcel/recordExportExcel";
export default {
    components: {ToolButton,exportExcel},
    data() {
        return {
            loadIng: false,
            dialogVisible:false,
            toolButtons: [{
                text: "添加",
                auth: "070801",
                icon: "add",
            },{
                text: "编辑",
                auth: "070802",
                icon: "edit",
            },{
                text: "删除",
                auth: "070803",
                icon: "delete",
            },
            // {
            //     text: "导出",
            //     auth: "070804",
            //     icon: "daochu",
            // }
            ],
            dialogTitle:"添加楼宇闸机",
            ruleForm: {
                areaId: '',
                buildId: '',
                accessName: '',
            },
            rules: { 
                areaId: [{ required: true, message: '请选择校区', trigger: 'change' }],
                buildId: [{ required: true, message: '请选择楼宇名称', trigger: 'change' }],
                accessName:[{ required: true, message: '请输入闸机名称', trigger: 'blur' }],
            },
            campusList:[],   //校区信息
            areaId:"",       //校区id
            manageBuildingList: [], //楼宇信息
            buildId:"",       //楼宇id
            currentPage: 1,
            totalRows: 0,
            pageSize: 20,
            order: "passTime desc", //排序
            defaultOrder: { prop: "", order: "ascending" },
            tableData: [],
            currentRow:[],    //双击
            contractTable:null, //单击
            exportFileName: "楼宇闸机",
            sheetName: "楼宇闸机",
            exportApi: buildGateApi.List,
            searchObj:{},
            columns: [{
                    prop: "areaName",
                    label: "校区",
                },{
                    prop: "buildingName",
                    label: "楼宇名称",
                },{
                    prop: "accessName",
                    label: "闸机",
                },{
                    prop: "editName",
                    label: "编辑人",
                },{
                    prop: "editTime",
                    label: "编辑时间",
                },
            ],
        };
    },
    methods: {
        toolButtonClick(val){
            switch (val) {
                case "添加":
                    this.funAddTabRow();
                    break;
                case "编辑":
                    if(this.contractTable === null){
                        this.$message.error("请选中需要编辑的数据行");
                        return false;
                    }
                    this.funEditRow(this.contractTable.buildingId);
                    break;
                case "删除":
                    this.funDelRow();
                    break;
                case "导出":
                    this.exportOpen();
                break;
            }
        }, 
        //取消
        evtDialogClose() {
            this.ruleForm= {
                areaId: '',
                buildId: '',
                accessName: '',
            }
        },
        //添加
        funAddTabRow(){
            this.dialogTitle="新增楼宇闸机";
            this.dialogVisible = true;
        },
        //获取校区信息
        funCampusInfo(){
            settingApi.getCampusInfo("1").then((res) => {
                if (res.status === 'success') {
                    this.campusList = res.data.children;
                }
            });
        },
        //获取楼宇
        getAuthList(collegeId) {
            apiLateRecord.getAuthList(collegeId).then((res) => {
                if (res.status === 'success') {
                    this.manageBuildingList = res.data.buildList;
                }
            });
        },
        //保存
        submitForm(formName) {
            this.loading = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {};
                    data.accessName = this.ruleForm.accessName;
                    data.buildingId = this.ruleForm.buildId;
                    buildGateApi.Save(JSON.stringify(data)).then((res) => {
                        if (res.status === "success") {
                            this.loading = false;
                            this.dialogVisible= false;
                            this.$message.success("保存成功");
                            this.$refs[formName].clearValidate();
                            this.$refs[formName].resetFields();
                            this.funDataList();
                        } else {
                            this.loading = false;
                            this.$message.error(res.message);
                        }
                    }).catch(()=>{
                        this.loading = false;
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //每页数量
        evtPageSizeChange(val) {
            this.pageSize = val;
            this.funDataList();
        },
        //分页
        evtPageCurrentChange(val) {
            this.currentPage = val;
            this.funDataList();
        },
        //列表
        funDataList(){
            this.loadIng=true;
            this.searchObj.areaId = this.areaId;
            this.searchObj.buildingId = this.buildingId;
            this.searchObj.tag = "buildGate";
            buildGateApi.List(this.areaId,this.buildId,this.currentPage,this.pageSize).then((res) => {
                if (res.errorCode === 0) {
                    this.tableData = res.data.rows;
                    this.totalRows = res.data.total;
                }
                this.loadIng = false;
            }).catch(()=>{
                this.loadIng = false;
            });
        },
        //单击选中
        getRowsInfo(row){
            this.contractTable = row;
        },
        //多选
        getStaffInfo(rows) {
            this.currentRow = rows;
        },
        //双击 编辑
        openDbEdit(rows) {
            this.funEditRow(rows.buildingId);
        },
        //编辑
        funEditRow(id){
            let eidtPremission = this.toolButtons.filter(item => item.auth === '070802')
            if (eidtPremission && eidtPremission.length > 0 && eidtPremission[0].disabled){
                this.$message.error('当前用户无法操作，请重新配置权限！');
                return false
            } 
            buildGateApi.getAccessInfo(id).then((res) => {
                if(res.status === 'success'){
                    if (res.data) {
                        this.dialogTitle="编辑楼宇闸机";
                        this.dialogVisible = true;
                        this.ruleForm.areaId = res.data.areaId;
                        this.ruleForm.accessName = res.data.accessName;
                        this.ruleForm.buildId = res.data.buildingId;
                    } else {
                        this.$message.error('编辑数据不存在');
                    }
                }
            })
        },
        //删除
        funDelRow(){
            if (this.currentRow.length === 0){
                this.$message.error('请选择需要删除的数据行！');
                return false
            } 
            this.$confirm("确定要删除楼宇闸机信息吗？", "提示", {
                distinguishCancelAndClose: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: 'warning'
            }).then(() => { 
                let ids =[];
                this.currentRow.forEach(col => {
                    ids.push(col.buildingId)
                });
                buildGateApi.getAccessInfoDel(ids.join(",")).then((res) => {
                    if(res.status ==='success'){
                        this.$message({type: 'success',message: '删除成功!'});
                        this.funDataList();
                    }
                }).catch(() => {});
            }).catch(() => {
                this.$message({type: 'info',message: '已取消删除'});          
            });
        },
        //打开导出数据窗口
        exportOpen() {
            this.$refs.exportExcel.exportOpen();
        },
    },
    created() {
        this.funCampusInfo();
        this.getAuthList();
        this.funDataList();
    },
};
</script>
<style lang="scss" scoped>
.buildGate{
    height: 100%;
    .el-container{
        height: 100%; 
        background-color: #fff;
        .toolbar-wap{
            height: 45px !important;
            display: flex;
            justify-content: flex-start;
            align-items: center;
           ::v-deep .tool-button{
                margin-top: 0;
            }
        }
        .page-main{
            height: 100%;
            .content{
                height: calc(100% - 60px);
            }
        }
    }
}
.colTitle {
  display: inline-block;
  margin-right: 10px;
  line-height: 34px;
}
</style>
